import { login_api, register_api } from './../api/user_api.js'

let state = -1
//获取以下各函数公用的元素
let obackground = document.querySelector(".background")
let ochangeBtns = document.querySelectorAll(".header-right span")
let oinnerChangeBtns = document.querySelectorAll(".baseboard .titles span")
let oforms = document.querySelectorAll(".dynamicForm>div")
let oclose = obackground.querySelector(".close img")
let ologinIdentifyBox = document.querySelector(".loginIdentify .identifyWrapper .identifyMain .identifyBox")
let oregisterIdentifyBox = document.querySelector(".registerIdentify .identifyWrapper .identifyMain .identifyBox")

function main(params) {
    header_bar_control()
    logout_event()
    loginRegisterPanel()
    login_event()
    register_event()
}
main()
//控制登录注册或者个人中心的按钮组显示
function header_bar_control(params) {
    const token = localStorage.getItem('token')
    if (token) {
        $('.personal_center').show()
    } else {
        $('.header-right').show()
    }
}
//退出登录
function logout_event(params) {
    $('.logout').on('click', function () {
        localStorage.removeItem("token")
        localStorage.removeItem("userInfo")
        location.reload()
    })
}
//登录注册面板控制
function loginRegisterPanel() {
    for (let index1 = 0; index1 < ochangeBtns.length; index1++) {
        const element1 = ochangeBtns[index1];
        element1.onclick = function () {
            state = index1
            //显示整个登录注册面板
            obackground.setAttribute("style", "display:block;")
            //关闭按钮功能
            oclose.onclick = function () {
                obackground.setAttribute("style", "display:none;")
            }
            cycleClearDisplay(oforms)
            oforms[state].setAttribute("style", "display:block;")
            cycleClearClass(oinnerChangeBtns)
            oinnerChangeBtns[state].className = "textBorderActive"
            for (let index2 = 0; index2 < oinnerChangeBtns.length; index2++) {
                const element2 = oinnerChangeBtns[index2];
                element2.onclick = function () {
                    state = index2
                    cycleClearClass(oinnerChangeBtns)
                    oinnerChangeBtns[state].className = "textBorderActive"
                    cycleClearDisplay(oforms)
                    oforms[state].setAttribute("style", "display:block;")
                    if (state == 0) {
                        ologinIdentifyBox.innerText = generateIdentifyingCode()
                        ologinIdentifyBox.onclick = function () {
                            ologinIdentifyBox.innerText = generateIdentifyingCode()
                        }
                    } else if (state == 1) {
                        oregisterIdentifyBox.innerText = generateIdentifyingCode()
                        oregisterIdentifyBox.onclick = function () {
                            oregisterIdentifyBox.innerText = generateIdentifyingCode()
                        }
                    }
                }
            }
            if (state == 0) {
                // ologinIdentifyBox.innerText = generateIdentifyingCode()
                // ologinIdentifyBox.onclick = function () {
                //     ologinIdentifyBox.innerText = generateIdentifyingCode()
                // }
            } else if (state == 1) {
                // oregisterIdentifyBox.innerText = generateIdentifyingCode()
                // oregisterIdentifyBox.onclick = function () {
                //     oregisterIdentifyBox.innerText = generateIdentifyingCode()
                // }
            }
        }
    }
}
//隐藏登录和注册表单
function cycleClearDisplay(tagArray) {
    for (let tagIndex = 0; tagIndex < tagArray.length; tagIndex++) {
        const tagElement = tagArray[tagIndex];
        tagElement.setAttribute("style", "display:none;")
    }
}
//清空登录注册表单class名
function cycleClearClass(tagArray) {
    for (let tagIndex = 0; tagIndex < tagArray.length; tagIndex++) {
        const tagElement = tagArray[tagIndex];
        tagElement.className = ""
    }
}
//验证码生成
function generateIdentifyingCode() {
    let randomCodeArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
    ]
    let char1 = randomCodeArray[parseInt(Math.random() * (randomCodeArray.length))]
    let char2 = randomCodeArray[parseInt(Math.random() * (randomCodeArray.length))]
    let char3 = randomCodeArray[parseInt(Math.random() * (randomCodeArray.length))]
    let char4 = randomCodeArray[parseInt(Math.random() * (randomCodeArray.length))]
    let string = "" + char1 + char2 + char3 + char4
    return string
}
//登录事件
function login_event(params) {
    $('.loginBtn button').on('click', function () {
        const account = $('.phoneWrapper input').val()
        const pwd = $('.pwdWrapper input').val()
        if (account && pwd) {
            login_api({ account: account, password: pwd }).then((res) => {
                localStorage.setItem('userInfo', JSON.stringify(res.data.userinfo))
                localStorage.setItem('token', res.data.userinfo.token)
                location.reload()
            }).catch((err)=>{
                alert('用户名或密码错误')
            })
        } else {
            alert('请输入用户名和密码')
        }
    })
}
//注册事件
function register_event(params) {
    $('.registerForm .registerFormBottom button').on('click',function(){
        const username= $('.registerForm .registerFormTop .registerUsernameWrapper input').val()
        const phone= $('.registerForm .registerFormTop .registerPhoneWrapper input').val()
        const pwd=$('.registerForm .registerFormTop .registerPwdWrapper input').val()
        const sure_pwd= $('.registerForm .registerFormTop .registerSurePwdWrapper input').val()
        if (username&&phone&&pwd&&sure_pwd) {
            if (pwd==sure_pwd) {
                register_api({username,mobile:phone,password:pwd}).then(res=>{
                    alert('注册成功')
                }).catch((err)=>{
                    alert('注册失败')
                })
            }else{
                alert('密码同确认密码不一致')
            }
        }else{
            alert('请完整填写表单')
        }
    })
}
